<template>
  <div>
       <div class="top_header">
  <span v-for="(item,index) in videoType" @click="changeVideoType(item)" >{{item.name}}</span>
</div>
<div class="card_content">
<div v-for="(item,index) in mvlist" class="top_item">
<img :src="item.coverUrl" alt="" class="list_img" @click="playList(item)">
  <span>{{item.name}}</span>
  <span>{{`🎸${item.title}🎺`}}</span>
</div>
</div>
  </div>
  <div class="video" v-if="showMv">
    <TVideo/>
  </div>
</template>

<script lang="ts" setup>
import TVideo from '@/base-ui/TPlay/src/TVideo.vue';
import { useStore } from '@/store';
import { useRouter } from 'vue-router';
import { computed ,watchEffect,ref} from 'vue'
import   emitterVideo   from '@/utils/mittEvent';

const router= useRouter()
const store = useStore()
const showMv = ref(false)


const mvlist = ref()
const videoType = ref()


store.dispatch('music/getVideoType')




watchEffect(()=>{
 mvlist.value= store.state.music.videoList
videoType.value= store.state.music.videoTypeList.slice(0,7)
})
// store.dispatch('music/getNewMv')
store.dispatch('music/getNewVideo')
const playList = (item: unknown)=>{
  showMv.value = true
emitterVideo.emit("Video", item);
}


const changeVideoType = (item: { id: any; })=>{
  store.dispatch('music/getVideoTypeList',item.id)

}



</script>
<style lang="less" scoped>
.video{
  position: fixed;
  width: 1250px;
  height: 700px;
  margin: -295px  250px;
}
.card_content{
  margin-top: -210px;
  margin-left: 300px;
  width: 1500px;
  height: 500px;
  position: absolute;
  .top_item{
    display: inline-block;
    margin: 20px 80px;
width: 200px;

height: 180px;
background-color: brown;
  }
}
.top_header{
  margin: -250px  380px;
 position: absolute;
  width: 520px;
  height: 50px;
  span{
    font-weight: 600;
    padding: 12px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
}
.list_img{
border-radius: 10%;
  width: 310px;
  height: 220px;
  padding:0px;
  &:hover{
    transform: scale(1.1);
  }
}
</style>
